<template>
    <div class="zuoPing">
        <div class="start">
            <h2>作品案列</h2>
            <p class="title">用技术与专注，将作品通过艺术和技术的结合，打造精品案例。</p>
            <ul>
                <li v-for="(item,index) in photo" :key="index">
                    <a :href="item.link">

                        <img :src="item.imgUrl" alt="">
                        <p>{{item.text}}</p>
                    </a>
                </li>
            </ul>
            <div class="btn">
                <a href="/#/Results/0"><span>更多案列</span></a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "zuoPing",
        data(){
            return{
                photo:[
                    {
                        imgUrl:require('../../assets/cases1.png'),
                        link:'/#/item/1',
                        text:'钉钉报表小程序'
                    },
                    {
                        imgUrl: require('../../assets/cases2.png'),
                        link:'/#/item/2',
                        text:'GSCloud发电机组云控系统'
                    },
                    {
                        imgUrl: require('../../assets/case3.jpg'),
                        link:'/#/item/3',
                        text:'速绽雪电商服务平台'
                    },
                    {
                        imgUrl: require('../../assets/cases4.jpg'),
                        link:'/#/item/4',
                        text:'计算机文化报名系统'
                    }
                ]
            }

        }
    }
</script>

<style lang="less" scoped>
.zuoPing{
    width: 100%;
    min-width: 1300px;
    height: 700px;
    background: url("../../assets/case-bg.jpg") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 150px 150px;
    padding-bottom: 100px;
    .start{
        min-width: 1100px;
        position: relative;
        h2{
            text-align: center;
            color: white;
            font-size: 30px;
            margin-bottom: 15px;
        }
        .title{
            text-align: center;
            color: #cccccc;
            font-size: 15px;
            margin-bottom: 50px;
        }
        ul{
            width: 100%;
            overflow: auto;
            li{
                float: left;
                margin-left: 6px;
                width: 24%;
                height: 200px;
                overflow: hidden;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    transition: 500ms ease-in-out;
                    &:hover{
                        width: 120%;
                        height: 120%;
                        transform: scale(120%);
                        margin-left: -10%;
                    }
                }
                p{
                   position: absolute;
                    bottom: 0;
                    margin: 0;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    background: black;
                    opacity: .7;
                    color: white;
                    font-size: 15px;
                    cursor: pointer;

                }
            }
        }
        .btn{
            height: 40px;
            width: 100%;
            position: relative;
            margin-top: 20px;
            padding-top: 50px;
            span{
                height: 40px;
                width: 150px;
                border: 1px solid #0595C7;
                color: #0595C7;
                border-radius: 5px;
                text-align: center;
                display: block;
                line-height: 40px;
                position: absolute;
                /*float: left;*/
                left: 50%;
                transform: translateX(-50%);
                transition: .5s ease-in-out;
                /*margin: 0 auto;*/
                cursor: pointer;
                /*background: transparent;*/
                &:before{
                    content: '';
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 100%;
                    background: #0595C7;
                    z-index: -2;
                    border-radius: 5px;
                }
                &:hover{
                   z-index: 1;
                    color: white;
                    background: transparent;
                }
                &:before{
                    transition: .5s ease-in-out;
                    /*background: #0595C7;*/
                    z-index: -1;
                }
                &:hover:after,&:hover:before{
                    width: 100%;
                }
            }
        }

    }
}
</style>
